<template>
    <el-dialog v-model="showDialog" title="配置用户角色" @close="close" style="width: 30%">
    <el-form inline class="demo-form-inline">
        <el-form-item label="角色名">
            <el-input v-model="query.name" placeholder="角色名" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" plain activity @click="queryRole">查询</el-button>
        </el-form-item>
    </el-form>
    <el-table ref="table" border :data="data.tableData" header-cell-class-name="headerClass">
        <el-table-column type="index" width="50" />
        <el-table-column align="center"  prop="name" label="角色名" />
        <el-table-column align="center"  label="操作" width="120">
            <template #default="scope">
                <el-link v-show="scope.row.have=='0'" title="添加角色" type="primary" @click="addRoleOnUser(scope.row.id)">
                    <el-icon>
                        <Plus />
                    </el-icon>
                </el-link>
                <el-link v-show="scope.row.have=='1'"  title="取消角色" type="primary" @click="removeRoleOnUser(scope.row.id)">
                     <el-icon><Minus /></el-icon>
                </el-link>
            </template>
        </el-table-column>
    </el-table>
        <br/>
        <el-pagination
                style="display: flex;align-items:center;justify-content:center;"
                v-model:currentPage="query.currentPage"
                v-model:page-size="query.pageSize"
                :page-sizes="[10, 20, 30]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="query.total"
                @size-change="queryRole"
                @current-change="queryRole"
        />
    </el-dialog>
</template>

<script setup>
    import request from '@/utils/request.js'
    import { ElMessage } from 'element-plus'
    import {ref,reactive,onUpdated} from 'vue'

    const configMenu = ref(null)
    const have = ref(true)
    let props = defineProps(['id'])
    let data = reactive({
        modRole:false,
        roleToMenu:false,
        tableData:[],
        type:"",
        id:"",
    });
    let showDialog = ref(false)

    let query = reactive({userId:0,currentPage:1,pageSize:10,total:0})

    onUpdated(function () {
        if(showDialog.value == true){
            queryRole ()
        }
    })

    function queryRole (){
        query['userId'] = props.id
        request.post("/api/role/getRoleOnUser", query).then(resp => {
            data.tableData = resp.records
            query.total = resp.total
        });
    }

    function reset (){
        query.name = ""
    }
    function close (){
       showDialog.value = false
    }

    function addRole(){
        data.modRole = true
        data.type = "add"
    }

    function addRoleOnUser(id){
        request.get(`/api/role/addRoleOnUser/${id}/${props.id}`).then(resp => {
            queryRole()
            close ()
            ElMessage({message: '添加成功！',type: 'success'})
        });
    }
    function removeRoleOnUser(id){
        request.get(`/api/role/removeRoleOnUser/${id}/${props.id}`).then(resp => {
            queryRole()
            close ()
            ElMessage({message: '删除成功！',type: 'success'})
        });
    }

    function editRole(id){
        data.id = id
        data.type = "edit"
        data.modRole = true
    }

    function configRole(id){
        data.id = id
            configMenu.value.show()
    }

    defineExpose({showDialog})
</script>
<style lang="css">

</style>